<template>
  <div class="contentRight2">
    <div id="tools">

      <div class="height8"></div>
      <!-- 查询条件 -->
      <a-form layout="inline" style="text-align: left;padding: 0 10px;" :selfUpdate="true">

        <a-form-item label="选择日期" class="marginBtm">
          <a-config-provider :locale="localezh_CN">
            <a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>
          </a-config-provider>
        </a-form-item>

        <a-form-item label="审批状态" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item :key="item.id" v-for="item in approvalStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>{{ statusValue }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <a-form-item label="基地" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="baseMenuClick">
              <a-menu-item :key="item.id" v-for="item in baceType">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>{{ visitBaseName }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <a-form-item label="区域" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="areaMenuClick">
              <a-menu-item :key="item.id" v-for="item in areaList">{{item.areaName}}</a-menu-item>
            </a-menu>
            <a-button>{{ areaName }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>



        <a-form-item label="关键字" class="marginBtm">
          <a-input v-model="queryValue" allowClear placeholder="请输入姓名/手机号" class="marginBtm"
                   @pressEnter="inquireStart"/>
        </a-form-item>

        <a-form-item class="marginBtm">
          <a-button type="primary" @click="inquireStart">
            查询
          </a-button>
        </a-form-item>

      </a-form>
      <a-divider style="margin: 5px 0"/>
      <div class="divPadiAlign">
        <a-button type="primary" class="button-marin" @click="exportList">
          导出
        </a-button>
        <!--<a-button type="primary" class="button-marin" @click="addDilog">-->
        <!--新增-->
        <!--</a-button>-->
      </div>
    </div>

    <a-table
      class="tabled"
      bordered
      :fixed="true"
      size="small"
      :columns="columns"
      :row-key="record => record.orderId + Math.random()"
      :data-source="tableData"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ x:xWidth,y: yHeight }"
      :locale="localezh_CN"
      @change="handleTableChange"
    >
      <!--设置单选按钮，点击选中行-->
      <!--:rowSelection="{type:'radio',selectedRowKeys:selectedRowKeys,fixed:true,onChange:onChange}"-->
      <!--:customRow="clickRow"   点击行选中-->

      <!-- <template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template> -->
    </a-table>

    <a-modal v-model="visible" title="新增" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>

  </div>
</template>

<script>
  import {tableBoxHeight} from "@/api/communal";
  import reservationApi from "@/api/reservation";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import dateUtil from "@/utils/dateUtils";
  import moment from "moment";
  import {ConfigProvider} from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';
  import cfg from '@/config/config'

  export default {
    components: {
      ConfigProvider
    },
    name: '',
    data() {
      return {
        localezh_CN,
        spinning: false,
        delayTime: 500,
        xWidth: "",
        yHeight: "",
        tableData: [],
        pagination: {
          pageSize: 30,
          current: 1,
          total: 100,
          showSizeChanger: true,
          // showQuickJumper: true,
          pageSizeOptions: ['30', '50', '100'],
          showTotal: (total) => `共 ${total} 条`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            // console.log("1111");
            this.pagination.current = 1;
            this.pagination.pageSize = pageSize;
          },
        },
        selectedRowKeys: [],
        loading: false,
        dateFormat: 'YYYY/MM/DD',
        startDate: "",
        endDate: "",
        startDated: "",
        endDated: "",
        queryValue: "",  //查询值,访客名称，访客手机号
        columns: [],   //表格表头
        statusValue: "全部",  //状态名称
        statusId: 99,   //状态id
        approvalStatus: [
          {name: "全部", id: 99},
          {name: "待审批", id: 0},
          {name: "审批中", id: 1},
          {name: "驳回", id: 2},
          {name: "通过", id: 3},
          {name: "自动审批", id: 4},
        ],
        visible: false,
        //基地列表
        baceType: [
          {name: "全部", id: 99},
        ],
        visitBaseName:"全部",   //基地名称
        visitBaseId: 99,   //99查全部，或者基地id
        //区域列表
        areaList: [
          {areaName: "全部", id: 99},
        ],
        areaName:"全部",    //区域名称
        visitAreaId: 99,   //99查全部，或者区域id


      }
    },
    beforeMount() {
      this.columns = [
        {
          title: '序号',     //表头
          dataIndex: 'serialNumber',   //字段名称
          width: '50px',    //设列宽度
          align: 'center',  //居中显示
          className: 'changeBack',   //重置覆盖背景色为浅灰色，否则是白色的
          customRender: (value, row, index) => `${(this.pagination.current - 1) * this.pagination.pageSize + index + 1}`  //设置动态序号
        },
        {
          title: '单号',
          dataIndex: 'orderId',
          width: '80px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '访客姓名',
          dataIndex: 'visitName',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '访客单位',
          dataIndex: 'visitCompany',
          width: '180px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '访客电话',
          dataIndex: 'visitTel',
          width: '120px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '主访客证件号码',
          dataIndex: 'vistorCertNumber',
          width: '180px',
          align: 'center',
          className: 'changeBack',
          ellipsis: true,   //此属性可以让单元格内容根据宽度自动省略
        },
        {
          title: '基地',
          dataIndex: 'visitBase',
          width: '120px',
          align: 'center',
          className: 'changeBack'
        },{
          title: '区域',
          dataIndex: 'visitArea',
          width: '120px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '访客类型',
          dataIndex: 'visitorsType',
          width: '100px',
          align: 'center',
          className: 'changeBack',
          ellipsis: true,   //此属性可以让单元格内容根据宽度自动省略
        },
        {
          title: '被访人',
          dataIndex: 'userLname',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '被访人电话',
          dataIndex: 'userTelephone',
          width: '120px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '预约开始',
          dataIndex: 'visitDateBegin',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '预约结束',
          dataIndex: 'visitDateEnd',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '随行人员',
          dataIndex: 'followName',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '审批状态',
          dataIndex: 'approvalStatusName',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '进入时间',
          dataIndex: 'visitorIndatetime',
          width: '180px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '离开时间',
          dataIndex: 'visitorOutdatetime',
          width: '180px',
          align: 'center',
          className: 'changeBack'
        },
        {
          title: '访问状态',
          dataIndex: 'visitorState',
          width: '100px',
          align: 'center',
          className: 'changeBack'
        }
      ];
      this.startDate = moment(dateUtil.getFirstDay(), this.dateFormat);
      this.endDate = moment(dateUtil.getLastDay(), this.dateFormat);
      this.startDated = moment(this.startDate).format('YYYY-MM-DD');
      this.endDated = moment(this.endDate).format('YYYY-MM-DD');
    },
    mounted() {
      // console.log(tableBoxHeight());
      this.yHeight = tableBoxHeight() + 3 + "px";
      this.xWidth = this.getTableWidth();
      this.statusValue = this.approvalStatus[0].name;
      this.statusId = this.approvalStatus[0].id;
      let minHeight = document.getElementsByClassName("ant-table");
      minHeight[0].style.minHeight = tableBoxHeight() + 40 + "px";

      // 获取基地
      this.findRegionList();
      this.inquireStart();  //初始化表格

    },
    methods: {
      // 计算表格宽度
      getTableWidth() {
        let totals = null;
        var el;
        for (el of this.columns) {
          totals += parseInt(el.width);
        }
        return totals + 100 + "px"
      },
      // 选择日期
      onChangePicker(date, dateString) {
        // console.log(date, dateString);
        this.startDated = dateString[0];
        this.endDated = dateString[1];
      },
      // 导出列表
      exportList() {
        if (this.startDated == "") {
          this.$message.warning("开始日期不能为空");
          return
        }
        if (this.endDated == "") {
          this.$message.warning("结束日期不能为空");
          return
        }

        this.spinning = true;
        let param = {
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
          startDate: this.startDated,
          endDate: this.endDated,
          approvalStatus: this.statusId,
          serchTxt: this.queryValue,
          visitBaseId: this.visitBaseId,
          visitAreaId: this.visitAreaId,
        };
        let jsonIn = encodeURI(encodeURI(JSON.stringify(param)));
        window.open(cfg.apiUrl + 'api/visitor/exportVisitList?jsonIn=' + jsonIn, "_self");
        this.spinning = false;

      },
      // 开始查询
      inquireStart() {
        this.pagination.current = 1;
        let param = {
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
          startDate: this.startDated,
          endDate: this.endDated,
          approvalStatus: this.statusId,
          serchTxt: this.queryValue,
          visitBaseId: this.visitBaseId,   //99查全部，或者基地id
          visitAreaId: this.visitAreaId,   //99查全部，或者区域id
        };

        // console.log(param);
        this.fetch(param);
      },
      // 审批状态下拉菜单
      handleMenuClick(e) {
        // console.log(e);
        this.approvalStatus.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.statusValue = el.name;
            this.statusId = el.id
          }
        });
        // console.log(this.statusValue,this.statusId);
      },
      // 切换基地
      baseMenuClick(e) {
        // console.log(e);
        this.baceType.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.visitBaseName = el.name;
            this.visitBaseId = el.id;
            if (el.id == 99){
              this.areaName = "全部";
              this.visitAreaId = 99
            } else {
              this.getAntingAreaList()
            }
          }
        });

      },
      // 切换区域
      areaMenuClick(e) {
        // console.log(e);
        this.areaList.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.areaName = el.areaName;
            this.visitAreaId = el.id
          }
        });

      },
      // 点击行
      clickRow(record) {
        return {
          on: {
            click: () => {
              console.log(record)
              let keys = [];
              keys.push(record.orderId);
              this.selectedRowKeys = keys;
            }
          }
        }

      },
      // 获取基地信息
      async findRegionList() {
        let resp = await reservationApi.getBdSysItemList({typeId: 200});
        // console.log(resp);
        if (resp.data.success){
          this.baceType = [...this.baceType,...resp.data.result];
          // console.log(this.baceType)
        } else {
          this.$message.error(resp.data.message);
        }
      },
      // 获取区域
      async getAntingAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: this.visitBaseId})
        console.log(res.data);
        if (res.data.success){
          this.areaList = [{areaName: "全部", id: 99}];
          this.areaList = [...this.areaList,...res.data.result];
          console.log(this.areaList)
        } else {
          this.$message.error(res.data.message);
        }

      },
      // 表格切换分页
      handleTableChange(pagination, filters, sorter) {
        // console.log(pagination);
        const pager = {...this.pagination};
        pager.current = pagination.current;
        this.pagination = pager;
        this.fetch({
          pageSize: pagination.pageSize,
          current: pagination.current,
          startDate: this.startDated,
          endDate: this.endDated,
          approvalStatus: this.statusId,
          serchTxt: this.queryValue,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        });
      },
      addDilog() {
        this.visible = true;
      },
      handleOk() {
        // console.log("点击了ok");
        this.visible = false;
      },

      onChange(selectedRowKeys, selectedRows) {
        // console.log(selectedRowKeys, selectedRows);
        this.selectedRowKeys = selectedRowKeys;
      },
      // 请求表格数据--测试用
      async fetch(params) {
        this.loading = true;
        let resp = await reservationApi.findVisitList(params);
        // console.log(resp.data);
        if (resp.data.success) {
          // console.log("111");
          this.loading = false;
          this.pagination.total = resp.data.result.total;
          this.tableData = resp.data.result.records;

        } else {
          // console.log("222");
          this.loading = false;
          this.$message.error(resp.data.message);
        }

        // 测试
        // setTimeout(() => {
        //   this.tableData=[
        //     {serialNumber:"0",oddNumber:"14",visitName:"王晓明",visitCompony:"上海步达",visitTel:"13345674568",vistorCertNumber:"410526194601114235",userLname:"冯伟",userTelephone:"17612345678",visitDateBegin:"2020-10-10 08:00:00",visitDateEnd:"2020-10-10 17:30:00",entourage:"主访客",approvalStatus:"已通过"},
        //     {serialNumber:"0",oddNumber:"14",visitName:"王晓明",visitCompony:"上海步达",visitTel:"13345674568",vistorCertNumber:"410526194601114235",userLname:"冯伟",userTelephone:"17612345678",visitDateBegin:"2020-10-10 08:00:00",visitDateEnd:"2020-10-10 17:30:00",entourage:"主访客",approvalStatus:"已通过"},
        //   ];
        // this.tableData=this.tableData.map((el,i)=>{
        //    el.serialNumber = i + 1;
        //    return el
        // });
        // console.log(this.tableData);
        //   this.loading = false;
        // }, 2000);
      },


    },
  }
</script>

<style scoped>


</style>

